<template>
  <div class="pt-0_5em">
    <!--  左右布局，左边分类，右边列表  -->
    <el-container>
      <el-aside width="200px" class="ml-1em mr-1em categoryMenuContainer">
        <div class="pb-1em btn-create-post">
          <el-button type="primary" class="w-200px bradius-18px txt-1_1em" :icon="CirclePlus" @click="toPublishIndex(null)">写文章</el-button>
        </div>
        <el-menu default-active="0" class="el-menu-vertical-demo" @select="selectCategory">
          <el-menu-item class="categoryMenu" index="0">
            <span>推荐</span>
          </el-menu-item>
          <el-menu-item class="categoryMenu" :index="item.id" v-for="item in categoryList">
            <span>{{ item.categoryName }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div class="pt-1em">
          <div class="flex-container flex-col flex-col-top bg-white mb-1em pd-1em bradius-8px shadow-sm" v-for="blog in blogPostList" :key="blog.id">
            <div class="w-100 flex-container flex-row-between">
              <div class="flex-container flex-row-left">
                <div class="bold txt-primary hand txt-1_2em" @click="toPublishIndex(blog.id)">{{ blog.postTitle }}</div>
              </div>
              <div>
                <div class="txt-0_9em">
                  <ElTag :type="PostStatusEnum.getEnumByValue(blog.postStatus).tag">{{ PostStatusEnum.getEnumByValue(blog.postStatus).label }}</ElTag>
                </div>
              </div>
            </div>
            <div class="txt-gray-80 txt-0_9em mt-0_5em mb-0_5em">{{ blog.postSummary }}</div>
            <div class="flex-container flex-row-between w-100">
              <div class="flex-container flex-row-left">
                <div class="txt-gray-90 txt-0_8em mr-0_5em">{{ blog.createTime }}</div>
              </div>
              <div class="flex-container flex-row-right">
                <div class="txt-gray-90 txt-0_8em">
                  <span v-for="tag in blog.tagList" class="pl-0_2em pr-0_2em">
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-1em w-100 flex-container flex-row-right">
          <Pagination @change="initBlogPostList" ref="paginationRef"></Pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CirclePlus, Delete, Refresh, Search, Setting, Edit } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import BlogPost from '@/api/blog/blogpost'
import Category from '@/api/blog/category'
import { useRouter } from 'vue-router'
import postStatusEnum from '../../../enums/PostStatusEnum'
import PostStatusEnum from '../../../enums/PostStatusEnum'

// 生命周期, 初始化数据
onMounted(() => {
  initCategory()
  initBlogPostList()
})

// 查询条件
const blogPostQuery = ref({
  categoryId: '',
  postStatus: -1,
  postSummary: '',
  postTitle: '',
  userId: '',
})

// 分类数据
const blogPostList = ref([])

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
function initBlogPostList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0 }
  }
  pageInfo.condition = blogPostQuery.value
  BlogPost.page(pageInfo).then(({ result }) => {
    const { total, records } = result
    blogPostList.value = records
    paginationRef.value.changeTotal(total, pageInfo.size)
  })
}

/**
 * 选择分类
 */
function selectCategory(id) {
  blogPostQuery.value.categoryId = id !== '0' ? id : ''
  initBlogPostList()
}

// 分类列表
const categoryList = ref([])

// 初始化分类列表
function initCategory() {
  Category.list().then(({ result }) => {
    categoryList.value = result
  })
}

// 查询条件表单
const blogPostQueryRef = ref()
// 重置查询条件
function resetQuery() {
  let pageInfo = { current: 1, size: 10, total: 0 }
  blogPostQueryRef.value.resetFields()
  initBlogPostList(pageInfo)
}

const emits = defineEmits(['success'])

// 删除
function deleteBlogPost(id) {
  BlogPost.delete(id).then(({ code }) => {
    if (code === 200) {
      initBlogPostList()
    }
  })
}

const router = useRouter()

// 跳转到文章发表页面
const toPublishIndex = (id) => {
  console.log('id', id)
  router.push({ path: '/post/publish', query: { id } })
}
</script>

<style scoped lang="scss">
.categoryMenu {
  &:hover {
    background-color: #ecf5ff !important;
  }
}
.el-menu {
  border: unset;
}
.categoryMenuContainer {
  min-height: 60vh;
  background-color: #ffffff;
}
.btn-create-post {
  background-color: var(--app-main-background-cloor);
}
</style>
